import { useState, memo, useCallback } from "react";

function App() {
  const [count, setCount] = useState(0);
  // 使用useCallback包裹，如果setCount不变化，每次传递给Foo组件相同的函数防止其重新渲染
  const resetCount = useCallback(() => {
    setCount(0);
  }, [setCount]);

  // 每次App组件渲染都会生成全新resetCount函数传递给Foo组件 导致其重新渲染
  // const resetCount = () => {
  //   setCount(0)
  // }

  return (
    <div>
      <span>{count}</span>
      <button onClick={() => setCount(count + 1)}>+1</button>
      <Foo resetCount={resetCount} />
    </div>
  );
}

const Foo = memo((props) => {
  console.log("Foo组件被重新渲染了");
  return (
    <div>
      <div>Foo组件</div>
      <button onClick={props.resetCount}>resetCount</button>
    </div>
  );
});
export default App;
